<template>
  <div>
    <div class="header_height"><!-- 占据原本的空间 --></div>
    <header class="header header_height" ref="header_background">
      <div class="logo_div">
        <el-image :src="logoImgUrl" alt="#" class="logo_img"/>
        <el-image :src="logo2ImgUrl" alt="#" class="logo_img2"/>
      </div>
      <div class="nav_menu__pc flex1"><!-- pc端导航栏 -->
        <el-link class="nav_menu__item" :underline="false" icon="el-icon-house" @click="routerPage('home')">首页</el-link>
        <el-dropdown>
          <el-link class="nav_menu__item" :underline="false" icon="el-icon-goods" @click="routerPage('product',null)">产品展示<i class="el-icon-arrow-down el-icon--right"/></el-link>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="productMenu in productMenuList">
              <el-link :underline="false" class="nav_menu__item_child" @click="routerPage('product',productMenu.id)">{{productMenu.name}}</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown><!--@click="gotoPage('news',null)"-->
          <el-link class="nav_menu__item" :underline="false" icon="el-icon-video-camera">新闻动态<i class="el-icon-arrow-down el-icon--right"/></el-link>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="productMenu in newsMenuList">
              <el-link :underline="false" class="nav_menu__item_child" @click="routerPage('news',productMenu.id)">{{productMenu.name}}</el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
          <el-link class="nav_menu__item" :underline="false" icon="el-icon-office-building" @click="routerPage('about_us')">关于我们</el-link>
          <el-link class="nav_menu__item" :underline="false" icon="el-icon-phone-outline" @click="routerPage('call_me')">联系我们</el-link>
        </div>
      <div class="nav_menu__mt flex1"><!-- 移动端导航栏 -->
        <el-popover placement="bottom-start" trigger="click" v-model="open">
          <el-button slot="reference" icon="el-icon-s-operation" type="text"></el-button>
          <div class="nav_menu__mt-menu">
            <span class="nav_menu__mt-menu__title" @click="routerPage('home')"><i class="el-icon-house"/>首页</span>
            <span class="nav_menu__mt-menu__title" @click="routerPage('product',null)"><i class="el-icon-goods"/>产品展示</span>
            <span class="nav_menu__mt_menu_child" v-for="productMenu in productMenuList" @click="routerPage('product',productMenu.id)">{{productMenu.name}}</span>
            <span class="nav_menu__mt-menu__title"><i class="el-icon-camera"/>新闻动态</span>
            <span class="nav_menu__mt_menu_child" v-for="productMenu in newsMenuList" @click="routerPage('news',productMenu.id)">{{productMenu.name}}</span>
            <span class="nav_menu__mt-menu__title" @click="routerPage('about_us')"><i class="el-icon-office-building"/>关于我们</span>
            <span class="nav_menu__mt-menu__title" @click="routerPage('call_me')"><i class="el-icon-phone-outline"/>联系我们</span>
          </div>
        </el-popover>
      </div>
      <div class="nav_menu__pc-sub"/>
    </header>
  </div>
</template>

<script>
import {get_data} from "@/api";
import {encodeBase64} from "@/utils/zzDouUtils/objUtil";

export default {
  name: "Jiayi_header",
  components: {},
  computed: {
  },
  data() {
    return {
      doc: {
        headerBackground: null,
      },
      header_overflow_color: 'rgb(105, 166, 248,0.75)',
      open: false,
      logoImgUrl: require('@/assets/images/logo.png'),
      logo2ImgUrl: require('@/assets/images/logo2.png'),
      homeImageList: [],
      productMenuList: [],
      newsMenuList: [],
    };
  },
  mounted() {
  },
  created() {
    this.getIndexData();
  },
  methods: {
    routerPage(path,id){
      if (path === 'home'){
        this.$router.push({path: '/'})
      }else if (path === 'product'){
        this.$router.push({path: '/product/type',query:{ j : id ? encodeBase64(id) : ''}})
      }else if (path === 'call_me' || path === 'about_us'){
        this.$router.push({path: '/',query:{ r :encodeBase64(path)}})
      }else if (path === 'news'){
        this.$router.push({path: '/news/type',query:{ j :encodeBase64(id)}})
      }
    },
    getIndexData(){
      get_data().then(response=>{
        this.homeImageList = response.homeImage;
        this.productMenuList = response.productMenu;
        this.newsMenuList = response.newsMenu;
      })
    },
  }
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.header_height{
  height: 5vh;
}
.header{
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  z-index: 10;
  background: rgb(105, 166, 248);
}

.logo_div{
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.logo_img{
  width: 2.7rem;
  height: 2.5rem;
}
.logo_img2{
  width: 9rem;
  height: 4rem;
}
/* 导航栏 */
.nav_menu__pc{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: rgb(255,255,255);
}
.nav_menu__item{
  color: #FFFFFF !important;
  font-size: 1.3rem;
  font-weight: bold;
}
.nav_menu__item_child{
  font-size: 1.8rem;
  margin: 1rem;
}
.nav_menu__pc-sub{
  width: 20%;
}

/* ------- 公共参数 ------*/

/*------- 响应式布局 -------*/
/* 手机（小屏幕） */
@media (width <= 992px) {
  html{
    font-size: 14px;
  }
  .header{
    height: 6vh;
  }
  .logo_div{
    width: 50%;
  }
  .nav_menu__pc{
    display: none;
  }
  .nav_menu__pc-sub{
    width: 5%;
  }
  .nav_menu__mt{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
  }
  .nav_menu__mt .el-button{
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: bold;
  }
  .nav_menu__mt-menu{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
  .nav_menu__mt-menu__title{
    margin: 0.3rem 0.3rem;
    font-size: 1.3rem;
    font-weight: bold;
    color: #000000;
  }
  .nav_menu__mt_menu_child{
    text-align: right;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    margin: 0.1rem 0.1rem;
  }
}
/* 平板 */
@media (width > 992px) and (width < 1200px) {
  html{
    font-size: 12px;
  }
}

@media (width >= 768px) {
  .nav_menu__mt{
    display: none;
  }
}
</style>
